<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/api.css" />
		<link rel="stylesheet" type="text/css" href="../../css/style.css" />
		<link rel="stylesheet" type="text/css" href="../../css/btnplus.css" />
		<style type="text/css">
			html,body{
				background-color: #F7F8FA;
				overflow-y: auto;
				-webkit-overflow-scrolling:touch;
			}
			.search_no{ padding: 40% 0 0;}
			.search_no img{ margin:0 auto; width: 30px;}
			.search_no p{ text-align: center; font-size: 12px; color: #9f9f9f; line-height: 45px; padding-bottom: 5px;}
			.search_no button{ display:block; border: 0; border-radius: 0; width: 120px; height: 36px; margin: 0 auto; color: #fff; background-color: #1c63fa; font-size: 14px;}


			.goods .top{ margin-top: 10px; padding: 15px; background-color: #fff; overflow: hidden;}
			.goods .top img{ width: 45px; height: 45px; margin-right: 10px;}
			.goods .top h4{ display:block; font-size: 15px; font-weight: 500; color: #202532; line-height: 25px;}
			.goods .top p{ font-size: 12px; color: #333;}
			.goods .top p a{ display:inline; text-decoration: underline; color: #3262F1; margin-right: 5px;}
			.goods .top .open{ display:block; width: 45px; height: 22px; background-color: #f5f5f5; border-radius: 11px; position: relative; transition: all .2s;}
			.goods .top .open::after{ position: absolute; content: ""; left: 1px; top: 1px; bottom: 1px; width: 20px; height: 20px; background-color: #fff; border-radius: 50%;}
			.goods .top .open.on{ background-color: #5dd293; box-shadow: 0 0 3px rgba(0,0,0,0.1);}
			.goods .top .open.on::after{ left: inherit; right: 1px;}
			.goods .title{ margin-top: 10px; padding: 0 15px; background-color: #fff;}
			.goods .title img{ width: 20px; margin-right: 10px;}
			.goods .title h4{ display:block; font-size: 15px; font-weight: 500; color: #202532; line-height: 50px;}
			.goods .title a{ display:block; font-size: 14px; color: #333; padding-right: 14px; background: url(../../image/img_13.png) no-repeat right center; background-size: 6px auto;}
			.goods .list{ background-color:#fff;}
			.goods .list li{ position:relative;padding: 0 15px;}
			.goods .list li::after{ position:absolute; content: ""; left: 15px; top: 0; right:0; border-top: 1px #d5d5d5 solid; transform: scaleY(0.5);}
			.goods .list h4{ display:block; font-size: 15px; font-weight: 400; line-height: 50px; height: 50px; color: #333; overflow: hidden;}
			.goods .list h4 img{ height: 5px; display: inline-block; vertical-align: top; margin: 20px 3px 0;}
			.goods .list i{ display:block; height: 16px; font-size: 12px; color: #fff; background-color: #ee1c27; border-radius: 8px; padding: 0 5px; box-sizing: border-box; min-width: 16px;}
			.goods .addbtn { width:100%; padding: 30px 15px; box-sizing:border-box;}
			.goods .addbtn button { width:100%;  border: 0; border-radius: 4px; height: 50px; font-size: 15px !important; background-color:#fff; color:#3262F1; }
			label.bui-switch-label .bui-switch {
				width: 50px;
				height: 25px;
				position: relative;
				border: 1px solid #dfdfdf;
				background-color: #fdfdfd;
				box-shadow: #dfdfdf 0 0 0 0 inset;
				border-radius: 20px;
				border-top-left-radius: 20px;
				border-top-right-radius: 20px;
				border-bottom-left-radius: 20px;
				border-bottom-right-radius: 20px;
				background-clip: content-box;
				display: inline-block;
				-webkit-appearance: none;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
				outline: none;
			}
			label.bui-switch-label .bui-switch:before {
				content: '';
				width: 23px;
				height: 23px;
				position: absolute;
				top: 1px;
				left: 1px;
				border-radius: 20px;
				border-top-left-radius: 20px;
				border-top-right-radius: 20px;
				border-bottom-left-radius: 20px;
				border-bottom-right-radius: 20px;
				background-color: #fff;
				box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
			}
			label.bui-switch-label .checked {
				border-color: #10B574;
				box-shadow: #10B574 0 0 0 16px inset;
				background-color: #10B574;
			}
			label.bui-switch-label .checked:before {
				left: 27px;
			}
			
			

			label.bui-switch-label.bui-switch-animbg {
				-webkit-transition: background-color ease 0.4s;
				transition: background-color ease 0.4s; 
			}
			label.bui-switch-label.bui-switch-animbg .bui-switch:before {
				-webkit-transition: left 0.3s;
				transition: left 0.3s;
			}
			label.bui-switch-label.bui-switch-animbg .checked + .bui-switch {
				box-shadow: #dfdfdf 0 0 0 0 inset;
				background-color: #10B574;
				-webkit-transition: border-color 0.4s, background-color ease 0.4s;
				transition: border-color 0.4s, background-color ease 0.4s;
			}
			label.bui-switch-label.bui-switch-animbg .checked + .bui-switch:before {
				-webkit-transition: left 0.3s;
				transition: left 0.3s;
			}
			.sk-three-bounce {
			  margin: 0 auto;
			  width: 80px;
			  text-align: center; }
			  .sk-three-bounce .sk-child {
				width: 13.5px;
				height: 13.5px;
				background-color: #3262F1;
				border-radius: 100%;
				display: inline-block;
				-webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
						animation: sk-three-bounce 1.4s ease-in-out 0s infinite both; }
			  .sk-three-bounce .sk-bounce1 {
				-webkit-animation-delay: -0.32s;
						animation-delay: -0.32s; }
			  .sk-three-bounce .sk-bounce2 {
				-webkit-animation-delay: -0.16s;
						animation-delay: -0.16s; }

			@-webkit-keyframes sk-three-bounce {
			  0%, 80%, 100% {
				-webkit-transform: scale(0);
						transform: scale(0); }
			  40% {
				-webkit-transform: scale(1);
						transform: scale(1); } }

			@keyframes sk-three-bounce {
			  0%, 80%, 100% {
				-webkit-transform: scale(0);
						transform: scale(0); }
			  40% {
				-webkit-transform: scale(1);
						transform: scale(1); }
			}
			.more{ padding: 1.20rem 0; text-align: center; font-size: 0.26rem; color: #999; line-height: 0.60rem;}
			.display-none{ display:none; }
			.text-center { text-align: center !important; }
		</style>
	</head>
	<body>
		<div class="goods">
			<ul class="top">
				<li class="m_cell_hd"><img src="../../image/img_47.png" alt="" /></li>
				<li class="m_cell_hd m_cell_primary">
					<h4>声音提醒</h4>
					<p tapmode onclick="openNavWin('#ddd','filtertype_win','filtertype_frm.html','设置筛选条件',false,false,true,[],{});"><a href="##" title="">点击此处</a>设置订单提醒的筛选条件</p>
				</li>
				<li class="m_cell_ft">
					<label class="bui-switch-label bui-switch-animbg" tapmode style="display:block; height:27px;">
						<i class="bui-switch" id="radiobtn" tapmode onclick="changeradio(this);"></i>
					</label>
				</li>
			</ul>
			<ul class="title" tapmode="lipress" onclick="openNavWin('#ddd','mylines_win','mylines_frm.html','接单线路',false,false,true,[],{});">
				<li class="m_cell_hd"><img src="../../image/img_48.png" alt="" /></li>
				<li class="m_cell_hd m_cell_primary"><h4 id="mylinesnum">我的接单路线</h4></li>
				<li class="m_cell_ft"><a href="##" title="">编辑</a></li>
			</ul>
			<ul class="list" id="lineslist">
			</ul>
			<script id="lineslist_template" type="text/template">
				{{ for (var i = 0, len = it.length; i < len; i++) { }}
				<li tapmode="lipress" onclick="openNavWin('#ddd','linegoods_win','linegoods_frm.html','{{=it[i].sendarea}}至{{=it[i].destarea}}',false,false,true,[],{linesid:{{=it[i].id}}});">
					<div class="m_cell_hd m_cell_primary"><h4>{{=it[i].sendarea}} <img src="../../image/img_21.png" alt="" /> {{=it[i].destarea}}</h4></div>
					<div class="m_cell_ft"><i>{{=it[i].goodscount}}</i></div>
				</li>
				{{ } }}
			</script>
			<div class="addbtn" id="addbtn">
				<button tapmode="btnpress" onclick="openNavWin('#fff','addlines_win','addlines_frm.html','接单线路',false,false,true,[],{areatype:'send',fromwin:'root'});">+ 添加线路</button>
			</div>
		</div>
		<div class="search_no display-none" id="divnodata">
			<img src="../../image/nolines.png" alt="" />
			<p>还未设置接单路线</p>
			<button tapmode="btnpress" onclick="openNavWin('#fff','addlines_win','addlines_frm.html','接单线路',false,false,true,[],{areatype:'send',fromwin:'root'});">点击设置</button>
		</div>
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/app.js"></script>
	<script type="text/javascript" src="../../script/doT.js"></script>
	<script type="text/javascript">
		var playnotice;
		var page = 1;
		var params = {
			where: {
				status: 1,
			},
			page: 1
		};
		var UILoading;
		apiready = function() {
			api.parseTapmode();
			UILoading = api.require('UILoading');
			//playnotice = $api.getStorage('playnotice');
			api.getPrefs({
				key: 'playnotice'
			}, function(ret, err) {
				if (ret && ret.value)
				{
					playnotice = ret.value;
					
				}
				
			});
			if(playnotice == 1) {
				$api.addCls($api.byId('radiobtn'), 'checked');
			}
			$api.css($api.dom('.goods'), 'display: none');
			showloading();
			getJsonFromAPI();
			var transformarr = [];
			for(var i=1; i<24; i++)
			{
				var index = i < 10 ? '0'+i : i;
				transformarr.push('widget://image/UIPullRefreshImg/pull_end_image_frame_'+index+'.png');
			}
			api.setCustomRefreshHeaderInfo({
				bgColor : '#F7F8FA',
				image : {
					pull : 'widget://image/UIPullRefreshImg/pull.png',
					transform : transformarr,
					load : transformarr
				}
			}, function(ret, err) {
				page = 1;
				getJsonFromAPI();
				setTimeout(function() {
					api.refreshHeaderLoadDone();
				}, 3000)
			});
			setInterval(function(){ 
				getNotice(); //间隔30秒检测下新订单
			}, 30000);
			
			api.addEventListener({
				name:"refreshindex"
			},function(ret,err){
				refreshPage();
			});
			api.addEventListener({
				name:"refreshlines"
			},function(ret,err){
				refreshPage();
			});
			api.addEventListener({
				name : 'refreshgoodlist'
			}, function(ret, err) {
				refreshPage();			
			});
			api.addEventListener({
				name : 'reloadpage'
			}, function(ret, err) {
				refreshPage();				
			});
		}
		function playNotice() {
			console.log('mp3');
			var cursel = 1;
			api.getPrefs({
				key: 'localmsg'
			}, function(ret, err) {
				if (ret && ret.value)
				{
					cursel = ret.value;
					
				}
				api.startPlay({
					path: 'widget://res/msg'+cursel+'.mp3'
				}, function(ret1, err1) {
					if (ret1) {
						//toast('播放完成');
					} else {
						//alert(JSON.stringify(err));
					}
				});
			});
			
			//播放提示音
			
		}
		function getNotice() {
			refreshPage();
			console.log('notice');
			api.getPrefs({
				key: 'user_info'
			}, function(ret, err) {
				if (ret.value) {
					var userinfo = JSON.parse(ret.value);
					api.ajax({
						url: ApiUrl + '/v1/lines',
						method: 'get',
						cache: false,
						timeout: 10,
						headers: {
							authorization: kAppKey+';'+userinfo.access_token+';'+userinfo.uid
						}
					}, function(ret, err) {
						if (ret) {
							if(ret.count > 0) {
								//播放提示音
								if(playnotice == 1) {
									playNotice();
								}
							}
						}
					});
				}
			});
		}
		function changeradio(obj) {
			$api.toggleCls(obj, 'checked');
			if($api.hasCls(obj, 'checked')) {
				playnotice = 1;
			}
			else
			{
				playnotice = 0;
			}
			api.setPrefs({
				key: 'playnotice',
				value: playnotice
			}, function(ret, err) {
				if(ret)
				{
					
				}
			});
			//$api.setStorage('playnotice',playnotice);
		}
		function refreshPage() {
			page = 1;
			getJsonFromAPI();
		}
		function getJsonFromAPI() {
			//从接口获取查询数据
			api.getPrefs({
				key: 'user_info'
			}, function(ret, err) {
				if (ret.value) {
					var userinfo = JSON.parse(ret.value);
					console.log(ApiUrl + '/v1/lines/'+page+'/'+ $api.jsonToStr(params));
					api.ajax({
						url: ApiUrl + '/v1/lines/'+page+'/'+ $api.jsonToStr(params),
						method: 'get',
						cache: false,
						timeout: 10,
						headers: {
							authorization: kAppKey+';'+userinfo.access_token+';'+userinfo.uid
						}
					}, function(ret, err) {
						hideloading();
						api.refreshHeaderLoadDone();
						if (ret) {
							$api.text($api.byId('mylinesnum'),'我的接单路线（'+ret.count+'/10）');
							if(ret.count > 9) {
								$api.addCls($api.byId('addbtn'),'display-none');
							}
							if(ret.list.length > 0)
							{
								$api.css($api.dom('.goods'), 'display: block');
						
								$api.addCls($api.byId('divnodata'),'display-none');
								var isAppend = true;
								if(page==1)
								{
									isAppend = false;
								}
								page++;
								var lineslist = ret.list;
								UpdateList('lineslist','lineslist_template',lineslist,isAppend);
							}
							else
							{
								if(page==1)
								{
									UpdateList('lineslist','lineslist_template',ret.list,false);
									$api.removeCls($api.byId('divnodata'),'display-none');
								}
							}
							
						} else {
							if(err.statusCode==402)
							{
								//Relogin();
							}
							else
							{
								console.log(JSON.stringify(err));
								toast('网络异常');
							}
						}
					});
				}
			});
		}
		//渲染数据
		function UpdateList(domId,templateId,jsondata,isAppend) {
			//console.log(JSON.stringify(jsondata));
			var act_content = $api.byId(domId);
			var tempFn = doT.template($api.byId(templateId).innerHTML);
			var resultText = tempFn(jsondata);
			//alert(isAppend);
			if(isAppend)
			{
				$api.append(act_content, resultText);
			}
			else
			{
				$api.html(act_content, resultText);
			}
			api.parseTapmode();
		}
	</script>
</html>